<template>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column v-if="have_index" type="index" :index="indexNumber_fn" width="50" />
        <el-table-column v-if="have_selec" type="selection" width="55" />
        <el-table-column v-for="(titleItem, index) in tableTitle" :label="titleItem.label">
            <template #default="scope">
                <div v-if="titleItem.type == 'img'">
                    <el-image style="width: 80px; height: 80px" :src="get_baseImgeUrl(scope.row.thumb)" fit="cover" />
                </div>
                <div v-if="titleItem.type == 'text'" style="display: flex; align-items: center">
                    <div>
                        {{ scope.row[titleItem['prop']] }}
                    </div>
                </div>
            </template>
        </el-table-column>


        <el-table-column v-if="have_opration" :label="opration_name">
            <template #default="scope">
                <slot name="oprate" :scope="scope"></slot>
            </template>
        </el-table-column>

    </el-table>

    <div v-if="have_page" class="page_wrap">
        <el-pagination v-model:current-page="pageObj.pageIndex" v-model:page-size="pageObj.pageSize"
            :page-sizes="[10, 30, 50, 100, 200, 300, 400]" :size="pageObj.pageSize"
            layout="total , sizes, prev, pager, next" :total="pageObj.total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>
</template>

<script setup lang="ts">

import { reactive, defineEmits } from 'vue'

import { get_baseImgeUrl } from '@/utils/myUtils.ts'

const emits = defineEmits(['getInfolist_ev'])

const props = defineProps({
    tableData: {
        type: Array,
        require: true,
        default: () => []
    },
    tableTitle: {
        type: Array,
        require: true,
        default: () => []
    },
    have_index: {
        type: Boolean,
        require: false,
        default: false
    },
    have_selec: {
        type: Boolean,
        require: false,
        default: false
    },
    have_opration: {
        type: Boolean,
        require: false,
        default: false
    },
    opration_name: {
        type: String,
        require: false,
        default: '操作'
    },
    have_page: {
        type: Boolean,
        require: false,
        default: false
    }
});


const pageObj = reactive({
    pageIndex: 1,
    pageSize: 10,
    total: 0
})

emits('getInfolist_ev', pageObj)

function indexNumber_fn(number) {
    return pageObj.pageSize * (pageObj.pageIndex - 1) + number + 1
}

function handleSizeChange() {
    emits('getInfolist_ev', pageObj)
}

function handleCurrentChange() {
    emits('getInfolist_ev', pageObj)
}

function change_total(total) {
    pageObj.total = total
}

defineExpose({
    change_total,
    pageObj
})

</script>